<template>
  <div class="repair">
    <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
        <span class="slot">品牌管理</span>
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="6"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障统计</span>
              </div>
              <div class="total-tj-gz">
                <div class="tj">
                  <span class="top">总停机时长</span>
                  <b class="color">320</b>
                  <span>分钟</span>
                </div>
                <div class="tj">
                  <span class="top">故障次数</span>
                  <b>34</b>
                </div>
              </div>
              <div class="line"></div>
              <div class="sort">
                <div class="sort-left">
                  设备故障排行：第 <span class="color">42</span>名
                </div>
                <div class="sort-right">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div></div
          ></el-col>
          <el-col :span="6"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障等级分布</span>
                <p>fault</p>
              </div>
              <div class="progress-box">
                <span class="left"
                  >一般
                  <p>26</p>
                </span>
                <div class="right">
                  <el-progress :percentage="50" color="#02b980"></el-progress>
                </div>
              </div>
              <div class="progress-box">
                <span class="left"
                  >严重
                  <p>3</p>
                </span>
                <div class="right">
                  <el-progress :percentage="6.0" color="#f29c38"></el-progress>
                </div>
              </div>
              <div class="progress-box">
                <span class="left"
                  >紧急
                  <p>6</p>
                </span>
                <div class="right">
                  <el-progress :percentage="12.9" color="#D75746"></el-progress>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障类型分布</span>
                <p>fault</p>
              </div>
              <div id="typeEcharts" style="height: 140px"></div>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障原因分布</span>
                <p>fault</p>
              </div>
              <div id="faultEcharts" style="height: 140px"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-card class="box-card btn-search page-search">
      <div slot="header">
        <div class="btn-box">
          <el-button type="info" icon="el-icon-refresh-left"></el-button>
          <el-button type="check" icon="el-icon-download">导出</el-button>
        </div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="报修编号">
            <el-input
              placeholder="报修编号"
              v-model="searchForm.roleName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="报修人">
            <el-input
              placeholder="报修人"
              v-model="searchForm.roleCode"
            ></el-input>
          </el-form-item>
          <el-form-item label="故障类型">
            <el-select
              placeholder="故障类型"
              v-model="searchForm.dsType"
              clearable
              style="width: 120px"
            >
              <el-option label="你好" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>
        <div></div>
      </div>
    </el-card>
    <div class="table-box">
      <IconTitle title="维修记录" imgUrl="yunwei">
        <span class="slot">维修列表</span>
      </IconTitle>
      <!-- 设备文档 -->
      <el-table
        :data="deviceData"
        border
        style="width: 100%"
        @selection-change="deviceSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="date" label="资料名称" align="center">
        </el-table-column>
        <el-table-column prop="name" label="资料类别" align="center">
        </el-table-column>
        <el-table-column prop="name" label="文档密级" align="center">
        </el-table-column>
        <el-table-column prop="address" label="文件数量" align="center">
        </el-table-column>
        <el-table-column prop="address" label="说明" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";

import IconTitle from "@/components/icon-title/index.vue";
let typeOption = {

  color: ["#D75746", "#f29c38", "#02b980"],
  series: [
    {
      type: "pie",
      radius: ["35%", "50%"],
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      data: [
        { value: 3, name: "管道故障：3" },
        { value: 2, name: "电器故障：2" },
        { value: 23, name: "油路故障：23" },
      ],
    },
  ],
};
let faultOption = {
  xAxis: {
    type: "category",
    data: ["误操作", "油路堵塞", "磨损老化", "螺丝松动"],
    axisLabel: {
      rotate: 40,
    },
  },
  yAxis: {
    type: "value",
    show: false,
  },

  series: [
    {
      data: [0, 0, 2, 3],
      type: "bar",
      label: {
        show: true,
        position: "top",
      },
      color: "#63b6f8",
    },
  ],
};
export default {
  name: "basic",
  components: {
    IconTitle,
  },
  data() {
    return {
      typeOption,
      faultOption,
      searchForm: {},
      deviceData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  mounted() {
    var chartDom = document.getElementById("typeEcharts");
    var myChart = this.$echarts.init(chartDom);
    myChart.setOption(this.typeOption);

    var faultDom = document.getElementById("faultEcharts");
    var faultEcharts = this.$echarts.init(faultDom);
    faultEcharts.setOption(this.faultOption);
  },
  methods: {
    deviceSelectionChange(){}
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/color.scss";

.repair {
  .table-box {
    .echarts-box {
      .echarts-item {
        .total-tj-gz {
          padding: 25px 0 20px 0;
          display: flex;
          .tj {
            width: 50%;
            .top {
              display: block;
              margin-bottom: 10px;
            }
            b {
              font-size: 20px;
            }
            b.color {
              color: #c9c184;
            }
          }
        }
        .line {
          height: 1px;
          background: #ccc;
          margin: 0 -15px 0 -15px;
        }
        .sort {
          margin-top: 15px;
          display: flex;
          justify-content: space-between;
          .sort-left {
            display: flex;
            align-items: center;
            .color {
              color: $theme;
            }
          }
          .sort-right {
            i {
              cursor: pointer;
            }
          }
        }
        //第二快
        .progress-box {
          margin-top: 20px;
          display: flex;
          align-items: center;
          p {
            display: inline-block;
            color: #606266;
            margin: 0 10px;
          }
          .right {
            width: 70%;
          }
        }
      }
    }
  }
 

}
</style>